{{ define "main"}}

{{ if site.Data.config.tab.enable }}
{{ with index .Site.Data .Site.Language.Lang .homepage.tab }}
<section class="section schedule">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <div class="section-title">
          <h3>{{.title | markdownify}}</h3>
          <p>{{ .content | markdownify }}</p>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <div class="schedule-tab">
          <ul class="nav nav-pills text-center">
            {{ range $i,$p:= .tablist }}
            <li class="nav-item">
              <a class="nav-link {{if eq $i 0}} active {{end}}" href="#{{.name|urlize}}" data-toggle="pill">
                {{.name}}
                <span>{{ .date | markdownify}}</span>
              </a>
            </li>
            {{ end }}
          </ul>
        </div>
        <div class="schedule-contents bg-schedule">
          <div class="tab-content" id="pills-tabContent">
            {{ range $i,$p:= .tablist }}
            <div class="tab-pane fade {{if eq $i 0}}show active{{end}} schedule-item" id="{{.name | urlize}}">
              <!-- Headings -->
              <ul class="m-0 p-0">
                <li class="headings">
                  <div class="time">Time</div>
                  <div class="speaker">Speaker</div>
                  <div class="subject">Subject</div>
                  <div class="venue">Venue</div>
                </li>
                <!-- Schedule Details -->
                {{ range .tablist_items }}
                <li class="schedule-details">
                  <div class="block">
                    <!-- time -->
                    <div class="time">
                      <i class="fa fa-clock-o"></i>
                      <span class="time">{{ .time }}</span>
                    </div>
                    <!-- Speaker -->
                    <div class="speaker">
                      <img src="{{ .speaker_image | absURL }}" alt="{{.speaker}}">
                      <span class="name">{{.speaker}}</span>
                    </div>
                    <!-- Subject -->
                    <div class="subject">{{ .subject }}</div>
                    <!-- Venue -->
                    <div class="venue">{{ .venue | markdownify }}</div>
                  </div>
                </li>
                {{ end }}
              </ul>
            </div>
            {{ end }}
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
{{ end }}
{{ end }}

{{ end }}
